<template>
  <div class="ordertable">
    <!-- 搜索框 -->

    <el-table
      border
      style="border-radius:5px;width:100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      :data="tableData"
      row-key="userId"
      lazy
    >
      <el-table-column type="index" :index="row"> </el-table-column>
      <el-table-column label="订单号" width="100">
        <template #default="scope">
          <i class="el-icon-s-order"></i>
          <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出发地" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.depart }}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的地" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.destination }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出行日期" width="100">
        <template #default="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="100">
        <template #default="scope">
          <i class="el-icon-bank-card"></i>
          <span style="margin-left: 10px">{{ scope.row.cost }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="航班号" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.flightId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <div style="margin-left:10px" v-if="scope.row.type == 'ad'">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >退票</el-button
            >
          </div>
          <div style="margin-left:10px" v-else>
            <el-button size="mini" type="danger" @click="handleDelete2()"
              >退票</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { defineComponent, ref, getCurrentInstance } from 'vue';
import { Order } from '@/utils/api/order';
export default defineComponent({
  name: 'Ordertable',
  setup() {
    const tableData = ref([]);
    const getorder = () => {
      Order.getorder()
        .then((res) => {
          if (res.data.status === '200') {
            tableData.value = res.data;
            console.log(tableData);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };
    const { ctx } = getCurrentInstance();
    const showDialog = ref(false);
    const ID = ref({ orderID: '' });
    const handleDelete = (row) => {
      ctx
        .$confirm('请确定是否退票，如退票将会影响您的信用值？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          ID.value.orderID = row.orderId;
          Order.delete(ID.value)
            .then((res) => {
              console.log(res);
            })
            .catch((error) => {
              console.log(error);
            });
          ctx.$message({
            type: 'success',
            message: '退票成功!',
          });
        })
        .catch(() => {
          ctx.$message({
            type: 'info',
            message: '取消退票',
          });
        });
      //向后端数据传输接口
    };
    const handleDelete2 = () => {
      ctx.$confirm('订单已完成不可退票', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      });
    };
    return {
      handleDelete2,
      showDialog,
      tableData,
      getorder,
      handleDelete,
    };
  },
  mounted: function() {
    this.getorder();
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.el-table {
  margin-top: 20px;
  margin-bottom: 30px;
}
</style>
